<template>
    <el-dialog v-model="visible" title="批量修改分组" :close-on-click-modal="false" :close-on-press-escape="false"
      style="width: 35%;">
      <el-form :model="dataForm" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="100px">
        <el-form-item label="分组">
          <el-select placeholder="请选择分组" v-model="dataForm.gid" clearable>
            <el-option v-for="option in groupList" :key="option.id" :label="option.groupName"
              :value="option.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
          <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref, watch } from "vue";
  import baseService from "@/service/baseService";
  import { useI18n } from "vue-i18n";
  import { ElMessage } from "element-plus";
  const { t } = useI18n();
  const emit = defineEmits(["refreshDataList"]);
  
  const visible = ref(false);
  const dataFormRef = ref();
  
  const dataForm = reactive({
    id: "",
    name: "",
    remark: "",
    gid: '', //分组
    ids: null as any
  });
  
  const init = (groupKey?: any) => {
    visible.value = true;
    dataForm.id = "";
    dataForm.ids = groupKey;
    getGroup()
    // 重置表单数据
    if (dataFormRef.value) {
      dataFormRef.value.resetFields();
    }
  };
  
  //分组列表
  const groupList = ref<any[]>([]);
  const getGroup = () => {
    baseService.post('/noc/noclygroup/list', { limit: 100 }).then((res) => {
      if (res.code == 0) {
        //刷新
        groupList.value = res.data.list;
      }
    });
  };
  
  
  // 表单提交
  const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
      if (!valid) {
        return false;
      }
      (!dataForm.id ? baseService.post : baseService.put)("/noc/nocly/updateGroup", dataForm).then((res) => {
        ElMessage.success({
          message: t("prompt.success"),
          duration: 500,
          onClose: () => {
            visible.value = false;
            emit("refreshDataList");
          }
        });
      });
    });
  };
  
  defineExpose({
    init
  });
  </script>
  <style scoped></style>
  